<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Laypage Demo es</title>
  <style>
    #app {
      max-width: 60%;
      margin: 50px;
    }

    h1 {
      font-size: 40px;
    }

    h2 {
      font-size: 24px;
      margin-top: 50px;
    }

    p {
      font-size: 16px;
    }
  </style>
</head>

<body>
  <div id="app">
    <h1>Laypage分页组件独立版</h1>
    <p>layui 的分页组件非常好用，此组件是 Laypage 分页模块独立版，提取自 layui 2.9.9，不依赖layui和jQuery。只是简单修改了 Laypage 模块，未深入修改，凑合能用，如有侵权，请联系删除。完整用法：<a href="https://layui.dev/docs/2/laypage">https://layui.dev/docs/2/laypage</a></p>

    <h2>普通用法</h2>
    <div id="demo-laypage-normal-1"></div>
    <div id="demo-laypage-normal-2"></div>

    <h2>自定义主题</h2>
    <div id="demo-laypage-theme-1"></div>
    <div id="demo-laypage-theme-2"></div>
    <div id="demo-laypage-theme-3"></div>

    <h2>自定义文本</h2>
    <div id="demo-laypage-text"></div>

    <h2>不显示上一页、下一页</h2>
    <div id="demo-laypage-pn-hide"></div>

    <h2>只显示上一页、下一页、当前页</h2>
    <div id="demo-laypage-pn-show"></div>

    <h2>自定义排版</h2>
    <div id="demo-laypage-layout-1"></div>
    <div id="demo-laypage-layout-2"></div>
    <div id="demo-laypage-layout-3"></div>

    <h2>自定义每页条数的选择项</h2>
    <div id="demo-laypage-limits"></div>

    <h2>完整显示</h2>
    <div id="demo-laypage-all"></div>

    <h2>高级 - 开启 HASH</h2>
    <div id="demo-laypage-hash"></div>


    <h2>高级 - 将一段已知数组分页展示</h2>
    <div id="demo-laypage-data"></div>
    <div id="demo-laypage-data-view"></div>

  </div>
  <script type="module">
    import laypage from "./dist/laypage.es.js";
    //普通用法
    laypage.render({
      elem: "demo-laypage-normal-1",
      count: 50, // 数据总数
    });
    laypage.render({
      elem: "demo-laypage-normal-2",
      count: 100, // 数据总数
    });

    // 自定义主题
    laypage.render({
      elem: "demo-laypage-theme-1",
      count: 100,
      theme: "#1E9FFF",
    });
    laypage.render({
      elem: "demo-laypage-theme-2",
      count: 100,
      theme: "#FF5722",
    });
    laypage.render({
      elem: "demo-laypage-theme-3",
      count: 100,
      theme: "#FFB800",
    });

    // 自定义文本
    laypage.render({
      elem: "demo-laypage-text",
      count: 100,
      first: "首页",
      last: "尾页",
      prev: "<em>←</em>",
      next: "<em>→</em>",
    });

    // 不显示上一页、下一页
    laypage.render({
      elem: "demo-laypage-pn-hide",
      count: 100,
      prev: false,
      next: false,
    });

    // 只显示上一页、下一页、当前页
    laypage.render({
      elem: "demo-laypage-pn-show",
      count: 50,
      groups: 1,
      first: false,
      last: false,
      layout: ["prev", "page", "next"],
      jump: function (obj, first) {
        // 首次不执行
        if (!first) {
          alert("第 " + obj.curr + " 页");
        }
      },
    });

    // 自定义排版
    laypage.render({
      elem: "demo-laypage-layout-1",
      count: 1000,
      layout: ["limit", "prev", "page", "next"],
    });
    laypage.render({
      elem: "demo-laypage-layout-2",
      count: 1000,
      layout: ["prev", "next", "page"],
    });
    laypage.render({
      elem: "demo-laypage-layout-3",
      count: 1000,
      layout: ["page", "count"],
    });

    // 自定义每页条数的选择项
    laypage.render({
      elem: "demo-laypage-limits",
      count: 1000,
      limit: 100,
      limits: [100, 300, 500],
      layout: ["prev", "page", "next", "limit"],
    });

    // 完整显示
    laypage.render({
      elem: "demo-laypage-all", // 元素 id
      count: 100, // 数据总数
      layout: ["count", "prev", "page", "next", "limit", "refresh", "skip"], // 功能布局
      jump: function (obj) {
        console.log(obj);
      },
    });

    // 开启 HASH
    laypage.render({
      elem: "demo-laypage-hash",
      count: 500,
      curr: location.hash.replace("#!curr=", ""), // 初始获取 hash 值为 curr 的当前页
      hash: "curr", // 自定义 hash 名称
    });

    // 将一段已知数组分页展示
    var data = ["北京", "上海", "广州", "深圳", "杭州", "长沙", "合肥", "宁夏", "成都", "西安", "南昌", "上饶", "沈阳", "济南", "厦门", "福州", "九江", "宜春", "赣州", "宁波", "绍兴", "无锡", "苏州", "徐州", "东莞", "佛山", "中山", "成都", "武汉", "青岛", "天津", "重庆", "南京", "九江", "香港", "澳门", "台北"]; // 测试数据
    laypage.render({
      elem: "demo-laypage-data",
      count: data.length,
      jump: function (obj) {
        var arr = [];
        var thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
        thisData.forEach(function (item, index) {
          arr.push(item);
        });
        var html = arr.join(",");
        // 模拟渲染
        document.getElementById("demo-laypage-data-view").innerHTML = html;
      },
    });

  </script>


  <script>
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?a1475343bd52cbc16e6288c12209b872";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>
</body>

</html>